<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">

        <!-- 使用局部组件 -->
        <part-child :username="username" tit="100" :fn="fatcherFun"></part-child>
        <button @click="username='洪金宝'">修改username</button>

    </div>
</body>

</html>
<script>
    //  组件之间的嵌套
    //  app 相当于根组件(父组件), partchild 相当于子组件 ,
    // 如何实现组件之间的参数传递?

    // 第一种方式: 实现父传子
    // 通过props 属性传值: 
    // 特点: 单向数据流, props 接收的数据都是只读的数据.不能修改

    // 第二种方式:实现父传子
    // 使用$parent 属性(不建议使用,后期维护可能出现问题)
    // 在子组件中使用this.$parent 该属性可以获取父组件的实例对象,进而获取父组件的数据
    // 通过 this.$parant.属性名 获取到父组件的数据


    // 第三种方式: 实现子传父
    // 通过 props 属性将父组件中的方法传递给子组件,子组件接收,并且调用该方法,参数为子组件中的数据,
    // 这样就会执行父组件中的方法, 然后在父组件就可以获取到子组件中的数据

    const app = Vue.createApp({
        data() {
            return {
                username: "成龙"
            }
        },
        methods: {
            fatcherFun(val) {
                console.log(1, val)
            }
        },
        // 定义局部组件
        components: {
            partChild: {
                template: `<div>
                            <p @click='editusernameFn'>我是局部组件--{{msg}}--{{username}}--{{tit}}</p>
                          </div>`,
                data() {
                    return {
                        msg: '小红'
                    }
                },
                props: ['username', 'tit', 'fn'],
                mounted() {
                    console.log(this);
                    console.log(this.$parent.username);

                    // 调用父组件传递过来的函数
                    this.fn(this.msg)
                },
                methods: {
                    editusernameFn() {
                        this.username = '房祖名'
                    }
                }
            }

        }
    })


    // 定义一个全局组件
    app.component('globalChild', {
        template: `<div>
                    我是全局组件
                    </div>`,
        data() {
            return {

            }
        },

    })

    app.mount('#app')

</script>